// 放大镜模块start
// 获取三个元素
var tool = document.querySelector('.scale_tool');
var img = document.querySelector('#detail_img');
var imgBox = document.querySelector('.detail_con_l');
var scale = document.querySelector('.hidden_box');
imgBox.addEventListener('mouseover', function () {
    tool.style.display = 'block';
    scale.style.display = 'block';
})
imgBox.addEventListener('mouseout', function () {
    tool.style.display = 'none';
    scale.style.display = 'none';
})
imgBox.addEventListener('mousemove', function (e) {
    // 获取鼠标相对于页面的位置
    var x = e.pageX;
    var y = e.pageY;
    var nowX = x - imgBox.offsetLeft;
    var nowY = y - imgBox.offsetTop;
    // 图片相对于父级元素的位置
    var imgX = img.offsetWidth - 150;
    var imgY = img.offsetHeight - 150;
    if (nowX < 150 && nowY < 150) {
        tool.style.top = '150px';
        tool.style.left = '150px';
    } else if (nowX > imgX && nowY > imgY) {
        tool.style.left = imgX + 'px';
        tool.style.top = imgY + 'px';
    } else if (nowX < 150 && nowY > imgY) {
        tool.style.top = imgY + 'px';
        tool.style.left = '150px';
    }
    else if (nowY < 150 && nowX > imgX) {
        tool.style.left = imgX + 'px';
        tool.style.top = '150px';
    }
    else if (nowX < 150) {
        tool.style.left = '150px';
        tool.style.top = nowY + 'px';
    } else if (nowY < 150) {
        tool.style.top = '150px';
        tool.style.left = nowX + 'px';
    }
    else if (nowX > imgX) {
        tool.style.left = imgX + 'px';
        tool.style.top = nowY + 'px';
    } else if (nowY > imgY) {
        tool.style.top = imgY + 'px';
        tool.style.left = nowX + 'px';
    } else {
        tool.style.top = nowY + 'px';
        tool.style.left = nowX + 'px';
    }
    scale.style.backgroundPositionX = tool.style.left;
    scale.style.backgroundPositionY = tool.style.top;
})
// 放大镜模块end
// 清除类名，排他
function clearBrother(node) {
    for (var i = 0; i < node.parentNode.children.length; i++) {
        node.parentNode.children[i].className = '';
    }
}
// 购买选项模块start
var sort = document.querySelectorAll('.select>ul>li');
for (var i = 0; i < sort.length - 1; i++) {//不包括最后一个li
    var now = sort[i].querySelectorAll('li');
    for (var j = 0; j < now.length; j++) {
        sort[i].querySelectorAll('li')[j].addEventListener('click', function () {
            clearBrother(this);
            this.className = 'selected';
        })
    }
    console.log(sort[i].querySelectorAll('li'));
}
// 购买选项模块end
// 购买数量start
var countted = document.querySelector('.countted').querySelector('input');
var add = document.querySelector('.change').children[0];
var sub = document.querySelector('.change').children[1];
add.addEventListener('click', function () {
    countted.value++;
})
sub.addEventListener('click', function () {
    if (countted.value > 1)
        countted.value--;
})

